<template>
  <div class="conatiner">
    <!-- 会员套餐 -->
    <div class="title">
      <div class="title1">会员套餐</div>
      <div class="title2">一次开通使用一年</div>
    </div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="(item, index) in memberList" :key="index">
        <div :class="
            'grid-content' +
              ' ' +
              'bg-purple' +
              ' ' +
              'one_item' +
              ' ' +
              'one_item' +
              index
          ">
          <div class="img_bg">
            <img class="one_item_image" :src="item.title" />
          </div>
          <div class="content">
            <div class="one_item_title">
              <div class="member" style="color: #fff">会员特权</div>
            </div>
            <div class="txt_left">
              <div class="one_item_content">
                <p v-html="item.describe"></p>
              </div>
            </div>
            <div class="price">
              {{ item.price | priceStatus }} <span>元/年</span>
            </div>
            <div class="box_button">
              <el-button class="button" @click="goUrl('/mealPay', 'mealPay', item.code, 4)">立即购买</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import filters from "../../utils/filters";
  export default {
    filters: filters,
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        memberObject: [{
            memberUrl: "/static/price/taocan_cjhy.png",
            title1: "会员特权",
            textOne: "① 1000M存储容量",
            textTwo: "② 可上传300M应用",
            textThree: "③ 下载页有广告",
            textFour: "④ CDN加速下载",
            price: "300"
          },
          {
            memberUrl: "/static/price/taocan_zjhy.png",
            title1: "会员特权",
            textOne: "① 1000M存储容量",
            textTwo: "② 可上传500M应用",
            textThree: "③ 下载页有广告",
            textFour: "④ CDN加速下载",
            price: "400"
          },
          {
            memberUrl: "/static/price/taocan_gjhy.png",
            title1: "会员特权",
            textOne: "① 1000M存储容量",
            textTwo: "② 可上传1500M应用",
            textThree: "③ 下载页有广告",
            textFour: "④ CDN加速下载",
            price: "699"
          }
        ],
        messageObject: [{
            messageUrl: "../../../static/帮助中心.png",
            text: "上面没有找到需要解答的问题？点击进入帮助中心去寻找吧。"
          },
          {
            messageUrl: "../../../static/客服咨询.png",
            text: "当然，我们也给你配备了24小时的在线客服，欢迎咨询。"
          }
        ],
        type: 4,
        memberList: []
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      getList() {
        var params = new URLSearchParams();
        params.append("type", this.type);
        this.$post(this.API.Price_payindex, params).then(res => {
          let data = res.data;
          for (let i = 0; i <= 2; i++) {
            data[i].title = this.memberObject[i].memberUrl;
          }
          this.memberList = data;
        });
      },
      goUrl(path, name, code, type) {
        var token_time = sessionStorage["token_time"];
        token_time = parseInt(token_time);
        token_time = token_time + 3600000;
        var now = new Date().getTime();
        if (token_time < now || token_time == undefined || isNaN(token_time)) {
          console.log("未登录");
          this.hasLogin = false;

          //跳转到登录
          sessionStorage.setItem("currentTab_title", "");
          this.$router.push({
            path: "/login",
            name: "login"
          });

          return;
        }

        this.$router.push({
          path: path,
          name: name,
          query: {
            code: code,
            type: this.type
          }
        });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
  };

</script>
<style scoped>
  /* 标题 */
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 80px 0px 40px 0px;
    font-family: PingFang-SC-Medium, PingFang-SC;
  }

  .title1 {
    width: 160px;
    height: 40px;
    font-size: 35px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #fff;
    line-height: 40px;
    text-align: center;
  }

  .title2 {
    font-size: 20px;
    color: #ccc;
    margin-top: 10px;
  }

  /* 会员套餐 */
  .img_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
  }

  .one_item {
    background: #272727;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 80px;
  }

  .one_item_title {
    font-size: 18px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #000000;
    line-height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
  }

  .one_item_content p {
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 16px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #fff;
    line-height: 40px;
    margin-left: 20px;
  }

  .txt_left {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .one_item_content {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 190px;
    height: 180px;
  }

  .one_item_image {
    width: 140px;
    margin: 40px 100px;
  }

  .price {
    font-size: 40px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ed782b;
    line-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .price span {
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ed782b;
    font-size: 18px;
    margin-top: 10px;
  }

  .button {
    background-image: linear-gradient(to right, #f59834, #f45610);
    border-radius: 34px;
    margin-bottom: 50px;
    margin-top: -18px;
    border: none;
  }

  .button>>>span {
    margin: 15px 40px;
    font-size: 26px;
    color: #fff;
    font-weight: 400;
  }

  .box_button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* .one_item1 .img_bg {
    background: linear-gradient(to bottom right, #e6e6e3 50%, #888789 0);
  }

  .one_item2 .img_bg {
    background: linear-gradient(to bottom right, #cfe6fe 50%, #ffe6bc 0);
  }

  .one_item1 .button {
    background: linear-gradient(90deg, #b1b5b8 0%, #797b7f 100%);
  }

  .one_item2 .button {
    background: linear-gradient(270deg, #6fc5ef 0%, #a7cfff 100%);
  }

  .one_item1 .one_item_content p {
    color: #77787c;
  }

  .one_item2 .one_item_content p {
    color: #4b98cc;
  } */

  .row-bg {
    margin-bottom: 80px;
  }

  /* 常见问题 */
  .four_item {
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 15px 20px 40px 20px;
    margin-bottom: 15px;
  }

  .four_item_one {
    display: flex;
    margin-top: 15px;
  }

  .four_item_image {
    width: 54px;
    height: 54px;
  }

  .four_item_title_one {
    margin-left: 10px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
  }

  .four_item_title_two {
    margin-left: 10px;
    color: #818181;
  }

  .four0 {
    background-color: #5190ff;
    color: #ffffff;
  }

  .four1 {
    background-color: #ff7226;
    color: #ffffff;
  }

</style>
